<template>
  <div class="StudentInformation-task-table">
    <el-table :data="State.StudentDetailsArr" style="width: 100%" height="90%" ref='table'>
      <el-table-column prop="id" label="序号" type="index" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" min-width="25%"></el-table-column>
      <el-table-column prop="major" label="专业" min-width="25%"></el-table-column>
      <el-table-column prop="role" label="角色" min-width="25%"></el-table-column>
      <el-table-column prop="phoneNumber" label="联系方式" min-width="25%"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, reactive, toRef, toRefs,watch,onMounted } from "vue";
export default defineComponent({
  name: "StudentInformation",
  components: {},
  props:{
     StudentDetailsArr: {
      type: Array,
      default: () => [],
    },
  },
  setup(props,ctx) {
    let State = reactive(
        {
            StudentDetailsArr:[]
        }
    )
    //赋值
    State.StudentDetailsArr=props.StudentDetailsArr
    //处理角色权限的名字
    function ProcessingRolePermissions(){
      for(let i=0;i<State.StudentDetailsArr.length;i++){
        if(State.StudentDetailsArr[i].role===2){
          State.StudentDetailsArr[i].role="学生"
        }
        if(State.StudentDetailsArr[i].role===1){
          State.StudentDetailsArr[i].role="指导老师"
        }
      }
    }
    // //监听父组件传过来的报名信息详情的值
    // watch(() => props, (val, old) =>
    //   {
    //     console.log("11111111111111")
    //     // State.StudentDetailsArr = val 
    //   },
    //   {deep: true}
    // )
    onMounted(() => {
      //处理角色权限该名字
      ProcessingRolePermissions()
    });
    return {
      State,
      ProcessingRolePermissions
    };
  },
});
</script>
<style lang="less">
.StudentInformation-task-table{
  position: absolute;
  width: 96%;
  height: 100%;
  left: 25px;
  top: 50px;
}
.StudentInformation-task-table .el-table{
  width: 96%;
  height: 90%;
  overflow: auto;
}
.StudentInformation-task-table .el-table .cell{
  text-align:center
}
</style>
